<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/header::commonlinks(~{::title},~{::link})">
    <title>用户管理</title>
    <link rel="stylesheet" th:href="@{/admin/usermanage/usermanage.css}">
    <link rel="stylesheet" th:href="@{/plugins/datatables-bs4/css/dataTables.bootstrap4.min.css}">
    <link rel="stylesheet" th:href="@{/plugins/datatables-responsive/css/responsive.bootstrap4.min.css}">
</head>
<body class="hold-transition sidebar-mini layout-fixed layout-navbar-fixed">
<div class="wrapper">
    <div th:include="common/header::topnavbar"></div>
    <div th:include="common/header::leftaside(activename='userManage')"></div>
    <!-- 内容区 -->
    <div class="content-wrapper">
        <!--内容区头部 -->
        <div class="content-header">
            <div class="header">
                <div class="title">用户管理</div>
                <div class="header-btn">
                    <button type="button" data-toggle="modal" data-target="#addmodal" class="btn btn-info"><i class="fas fa-plus"></i> 新增管理员</button>
                </div>
            </div>

            <div class="container-fluid">
                <div class="card">
                    <div class="userlist">
                        <table class="table table-striped table-bordered table-hover">
                            <thead class="thead-dark">
                                <tr>
                                    <td>编号</td>
                                    <td>用户名</td>
                                    <td>角色</td>
                                    <td>邮箱</td>
                                    <td>操作</td>
                                </tr>
                            </thead>
                            <tbody class="listbody">
                            </tbody>

                        </table>

                    </div>
<!--                   分页 -->
                    <div id="pagination"></div>
                </div>

            </div><!-- /.container-fluid -->
        </div>

<!--        修改模态框-->
        <div id="editmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="msgModalLabel"
             aria-hidden="true">
            <form  class="needs-validation validateForm" novalidate>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="msgModalLabel">修改资料</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group d-flex" >
<!--                                <input style="display: none" type="text" id="id" name="id" >-->
                                <label class="col-sm-3 control-label" style="display: none">编号：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control userId" style="display: none" name="id" id="id">
                                </div>
                            </div>
                            <div class="form-group d-flex">
                                <!--                                <input style="display: none" type="text" id="id" name="id" >-->
                                <label class="col-sm-3 control-label ">邮箱：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control useremail" name="email" id="email" disabled>
                                </div>
                            </div>
                            <div class="form-group d-flex">
                                <label class="col-sm-3 control-label">用户名：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control username" id="username" name="username" disabled required autofocus="">
                                </div>
                                <div class="invalid-feedback">
                                    用户名不能为空
                                </div>
                            </div>

                            <div class="form-group d-flex">
                                <label class="col-sm-3 control-label ">角色：</label>
                                <div class="col-sm-8">
                                    <select id="userrole" class="form-control userrole" name="userrole">
                                        <option value="1">管理员</option>
                                        <option value="2">普通用户</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group d-flex">
                                <label class="col-sm-3 control-label">学校：</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control school" id="school" name="school">
                                </div>
                            </div>
                            <div class="form-group d-flex">
                                <label class="col-sm-3 control-label">学历：</label>
                                <div class="col-sm-8">
                                    <select id="education" class="form-control education" name="education">
                                        <option value="无">无</option>
                                        <option value="初中">初中</option>
                                        <option value="高中">高中</option>
                                        <option value="专科">专科</option>
                                        <option value="本科">本科</option>
                                        <option value="硕士">硕士</option>
                                        <option value="博士">博士</option>
                                    </select>
                                    <!-- <input type="text" class="form-control" id="education" placeholder="请输入姓"> -->
                                </div>
                            </div>
                            <div class="form-group d-flex">
                                <label class="col-sm-3 control-label">个人简介：</label>
                                <div class="col-sm-8">
                                <textarea class="form-control content" rows="3" maxlength="300" id="content" name="content" style="resize: none"
                                        placeholder="请在此处介绍你自己"></textarea>
                                    <span id="word">0</span><span>/300</span>
                                </div>
                            </div>

                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary valid-button editbtn" data-dismiss="modal">提交更改</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div>
            </form>
        </div>
<!--        删除确定框-->
        <div id="delmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="deleModalLabel"
             aria-hidden="true">
            <form  class="needs-validation validateForm" novalidate>
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="deleModalLabel">确认删除</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                            <div class="delebody"><i class="fa-exclamation-circle fas"></i>删除后将无法恢复，确定吗</div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-info" data-dismiss="modal"><i class="fas fa-meh">我再想想</i></button>
                            <button type="submit" class="btn btn-primary valid-button delebtn"><i class="fas fa-check">狠心确定</i></button>
                        </div>
                    </div><!-- /.modal-content -->
                    </div>
                </div>
            </form>
        </div>

<!--        增加用户模态框-->
        <div id="addmodal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="addmodallabel"
             aria-hidden="true">
            <form  class="needs-validation validateForm adddataForm" novalidate th:messageVo="${UserManageCreateVO}">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="addmodallabel">添加管理员</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        </div>
                        <div class="modal-body">
                                <input type="text" hidden value="1" name="roleId">
                                <div class="input-group mb-3">
                                    <input type="email" class="form-control" name="email" placeholder="邮箱" required>
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-envelope"></span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback">
                                        请输入合法的邮箱！
                                    </div>
                                </div>
                                <div class="input-group mb-3">
                                    <input type="text" class="form-control" name="username" placeholder="用户名" required>
                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-user"></span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback ">
                                        用户名不能为空
                                    </div>
                                </div>
                                <div class="input-group mb-3">
                                <input type="password" class="form-control" name="password" placeholder="密码"
                                       required id="password1">

                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-lock"></span>
                                    </div>
                                </div>
                                <div class="invalid-feedback equal-validate">
                                    密码不能为空
                                </div>
                            </div>
                                <div class="input-group mb-3">
                                    <input type="password" class="form-control" placeholder="确认密码" required
                                           id="password2">

                                    <div class="input-group-append">
                                        <div class="input-group-text">
                                            <span class="fas fa-lock"></span>
                                        </div>
                                    </div>
                                    <div class="invalid-feedback equal-validate">
                                        确认密码不能为空
                                    </div>
                                </div>
                            <div class="input-group mb-3">
                                <input type="text" class="form-control" name="school" placeholder="学校" required>
                                <div class="input-group-append">
                                    <div class="input-group-text">
                                        <span class="fas fa-school"></span>
                                    </div>
                                </div>
                                <div class="invalid-feedback ">
                                    学校不能为空
                                </div>
                            </div>
                            <div class="input-group mb-3">
                                <select  class="form-control" name="education">
                                    <option value="初中">初中</option>
                                    <option  value="高中">高中</option>
                                    <option value="专科">专科</option>
                                    <option  value="本科">本科</option>
                                    <option value="硕士">硕士</option>
                                    <option  value="博士">博士</option>
                                </select>
                            </div>
                            <div class="input-group mb-3">
                                <textarea id="admincontent" class="form-control" rows="3" maxlength="300"  name="content"  style="resize: none"
                                          placeholder="请在此处介绍你自己"></textarea>
                                <br>
                                <span id="adminword">0</span><span>/300</span>

                            </div>



                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="submit" class="btn btn-primary valid-button addbtn" >确认</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div>
            </form>
        </div>

        <!-- /内容区头部 -->

        <!-- 内容区主体 -->

        <!-- /内容区主体 -->
    </div>
    <!-- /内容区 -->
    <!-- 右侧栏 -->
    <div th:include="~{common/header::rightaside}"></div>
    <!-- /右侧栏 -->
    <!-- 底部栏 -->
    <div th:include="~{common/footer::footer}"></div>
    <!--所有js必须放在jq下面-->
    <div th:replace="common/header::commonjs(~{::script})">
        <!--        私有的js-->
        <script th:src="@{/plugins/pagination/jquery.pagination.js}"></script>
        <script th:src="@{/admin/usermanage/index.js}" th:inline="javascript"></script>
    </div>
</div>

</body>
</html>